<script>
import localstorages from '@/store/localstorages';

export default {
	name: 'login_page',
	data() {
		return {
			form: {
				username: '',
				password: '',
			},
		};
	},
	methods: {
		register() {
			console.log('别点啦真的一滴都没有啦');
		},

		submitForm() {
			const formData = new FormData();
			formData.append('username', this.form.username);
			formData.append('password', this.form.password);
			// 发送请求
			// this.$axios.post('http://127.0.0.1:3000/login', formData).then((res) => {
			// 	console.log(res);
			// });
			console.log(formData, this.form);

			localstorages.setItem('loginInfo', {
				username: this.form.username,
				password: this.form.password,
			});

			localstorages.setItem('login', true);
			localstorages.setItem('token', '123456');
			this.$router.push('/home');
		},
	},
};
</script>

<template>
	<div class="container">
		<form class="login" @submit.prevent="submitForm">
			<!-- 账号输入框 -->
			<div class="input_username">
				<label for="username">账号 : </label>
				<input
					type="text"
					id="username"
					placeholder="请输入账号"
					v-model="form.username"
				/>
			</div>
			<!-- 密码输入框 -->
			<div class="input_password" style="margin-top: 10px">
				<label for="password">密码 : </label>
				<input
					type="password"
					id="password"
					placeholder="请输入密码"
					v-model="form.password"
				/>
			</div>

			<!-- 登录注册按钮 -->
			<div class="login_btn">
				<button type="submit">登录</button>
				<button @click="register">注册</button>
			</div>
		</form>
	</div>
</template>

<style scoped>
.container {
	width: 100%;
	height: 100vh;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;

	font-family: 'Exo', Arial, sans-serif;
	background: url('https://static.fedev.cn/sites/default/files/blogs/2021/2101/glassmorphism-css-11.jpeg')
		no-repeat center fixed;
	background-size: cover;
	color: #fff;
	overflow: hidden;
}
.login_btn {
	display: flex;
	justify-content: space-around;
	margin-top: 10px;
}
</style>
